<template>
    <div>
        <div id="working">
            <div>
                <span
                    style="color: skyblue; font-size: 25px; margin-right: 10px"
                    >•</span
                >
                <p
                    style="
                        font-size: 16px;
                        font-weight: 500;
                        display: inline-block;
                    "
                >
                    服务中技师
                </p>
            </div>
            <div class="container">
                <div
                    class="server"
                    v-for="item in workingData"
                    :key="item.technician_id"
                >
                    <div class="server-item" slot="reference">
                        <div class="top">项目： 欧迪足道</div>
                        <div class="middle">
                            <div class="pic img">
                                <img
                                    class="img-show"
                                    src="../../assets/tec1.jpg"
                                    alt=""
                                />
                            </div>
                            <div class="pic tecname">
                                {{ item.technician_name }}
                            </div>
                            <div class="pic state" @click="changeState(item)">
                                <div
                                    class="inside"
                                    v-if="item.technician_state === 1"
                                >
                                    轮
                                </div>
                                <div class="inside" v-else>点</div>
                            </div>
                        </div>
                        <div class="foot">
                            <div class="left-room">102</div>
                            <div class="right-servenum">1/2</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="free">
            <div>
                <span
                    style="color: skyblue; font-size: 25px; margin-right: 10px"
                    >•</span
                >
                <p style="font-size: 16px; display: inline-block">空闲技师</p>
            </div>

            <div class="content">
                <div class="left" v-for="ele in skills" :key="ele._id">
                    <div>
                        <div class="text">{{ ele }}</div>
                    </div>
                </div>
                <div class="right">
                    <!-- ----------------------女技师------------------------ -->
                    <div class="femal">
                        <div class="njs">
                            <div
                                @click="getPersonalMsg(item)"
                                class="items"
                                v-for="item in femaleData"
                                :key="item.technician_id"
                            >
                                <img
                                    @click="drawer = true"
                                    type="primary"
                                    style="margin-left: 16px"
                                    src="../../assets/tec2.jpg"
                                    alt=""
                                />
                                <span class="tecnames">{{
                                    item.technician_name
                                }}</span>

                                <el-drawer
                                    title="技师信息"
                                    :visible.sync="drawer"
                                    :with-header="true"
                                    :append-to-body="true"
                                    :show-close="true"
                                    size="478px"
                                >
                                    <div id="showmsg">
                                        <div class="personalmsg">
                                            <div class="top">
                                                <div class="pic">
                                                    <img
                                                        src="../../assets/touxiang1.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="msg">
                                                    <div class="txt">
                                                        <span
                                                            style="
                                                                font-size: 18px;
                                                                margin-right: 20px;
                                                            "
                                                            >{{ name }}</span
                                                        >
                                                        <el-button
                                                            type="success"
                                                            round
                                                            size="mini"
                                                            >{{
                                                                state == 3
                                                                    ? "在班"
                                                                    : "请假"
                                                            }}</el-button
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >工号：{{
                                                                id
                                                            }}</span
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >擅长：欧迪足道、欧迪油压、欧迪指压</span
                                                        >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="state">
                                                <el-button
                                                    type="primary"
                                                    size="medium"
                                                    ><span style="color: white"
                                                        >预约</span
                                                    ></el-button
                                                >
                                                <el-button size="medium"
                                                    >请假</el-button
                                                >
                                            </div>
                                        </div>
                                        <div class="rows" style=""></div>
                                        <div class="judgement">
                                            <div class="section">
                                                <p
                                                    style="
                                                        color: rgb(
                                                            44,
                                                            140,
                                                            255
                                                        );
                                                        padding-left: 15px;
                                                    "
                                                >
                                                    • 评价信息
                                                </p>
                                            </div>
                                            <div
                                                class="section"
                                                style="padding-left: 25px"
                                            >
                                                <span>服务订单：523单</span>
                                                <span
                                                    style="
                                                        dispaly: inline-block;
                                                        margin-left: 170px;
                                                        color: rgb(231, 79, 79);
                                                    "
                                                    >综合好评 99.26%</span
                                                >
                                            </div>
                                            <div class="section goodjudge">
                                                <div class="pretty">
                                                    单向好评：
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rows_1" style=""></div>
                                        <div class="comment">
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value2"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value3"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value4"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pageBtn">
                                            <el-button
                                                type="primary"
                                                icon="el-icon-arrow-left"
                                                >上一页</el-button
                                            >
                                            <span class="pagetxt">1/5</span>
                                            <el-button type="primary"
                                                >下一页<i
                                                    class="el-icon-arrow-right el-icon--right"
                                                ></i
                                            ></el-button>
                                        </div>
                                    </div>
                                </el-drawer>
                            </div>
                        </div>
                    </div>
                    <!-- ----------------------男技师------------------------ -->
                    <div class="man">
                        <div class="njs">
                            <div
                                @click="getPersonalMsg(item)"
                                class="items"
                                v-for="item in manData"
                                :key="item.technician_id"
                            >
                                <img
                                    @click="drawer = true"
                                    type="primary"
                                    style="margin-left: 16px"
                                    src="../../assets/nan2.jpg"
                                    alt=""
                                />
                                <span class="tecnames">{{
                                    item.technician_name
                                }}</span>
                                <el-drawer
                                    title="技师信息"
                                    :visible.sync="drawer"
                                    :with-header="true"
                                    :append-to-body="true"
                                    :show-close="true"
                                    size="478px"
                                >
                                    <div id="showmsg">
                                        <div class="personalmsg">
                                            <div class="top">
                                                <div class="pic">
                                                    <img
                                                        src="../../assets/touxiang1.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="msg">
                                                    <div class="txt">
                                                        <span
                                                            style="
                                                                font-size: 18px;
                                                                margin-right: 20px;
                                                            "
                                                            >{{ name }}</span
                                                        >
                                                        <el-button
                                                            type="success"
                                                            round
                                                            size="mini"
                                                            >{{
                                                                state == 3
                                                                    ? "在班"
                                                                    : "请假"
                                                            }}</el-button
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >工号：{{
                                                                id
                                                            }}</span
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >擅长：欧迪足道、欧迪油压、欧迪指压</span
                                                        >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="state">
                                                <el-button
                                                    type="primary"
                                                    size="medium"
                                                    ><span style="color: white"
                                                        >预约</span
                                                    ></el-button
                                                >
                                                <el-button size="medium"
                                                    >请假</el-button
                                                >
                                            </div>
                                        </div>
                                        <div class="rows" style=""></div>
                                        <div class="judgement">
                                            <div class="section">
                                                <p
                                                    style="
                                                        color: skyblue;
                                                        padding-left: 15px;
                                                    "
                                                >
                                                    • 评价信息
                                                </p>
                                            </div>
                                            <div
                                                class="section"
                                                style="padding-left: 25px"
                                            >
                                                <span>服务订单：523单</span>
                                                <span
                                                    style="
                                                        dispaly: inline-block;
                                                        margin-left: 170px;
                                                        color: rgb(231, 79, 79);
                                                    "
                                                    >综合好评 99.26%</span
                                                >
                                            </div>
                                            <div class="section goodjudge">
                                                <div class="pretty">
                                                    单向好评：
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rows_1" style=""></div>
                                        <div class="comment">
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value2"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value3"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value4"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pageBtn">
                                            <el-button
                                                type="primary"
                                                icon="el-icon-arrow-left"
                                                >上一页</el-button
                                            >
                                            <span class="pagetxt">1/5</span>
                                            <el-button type="primary"
                                                >下一页<i
                                                    class="el-icon-arrow-right el-icon--right"
                                                ></i
                                            ></el-button>
                                        </div>
                                    </div>
                                </el-drawer>
                            </div>
                        </div>
                        <div class="njs">
                            <div
                                @click="getPersonalMsg(item)"
                                class="items"
                                v-for="item in manData"
                                :key="item.technician_id"
                            >
                                <img
                                    @click="drawer = true"
                                    type="primary"
                                    style="margin-left: 16px"
                                    src="../../assets/nan2.jpg"
                                    alt=""
                                />
                                <span class="tecnames">{{
                                    item.technician_name
                                }}</span>
                                <el-drawer
                                    title="技师信息"
                                    :visible.sync="drawer"
                                    :with-header="true"
                                    :append-to-body="true"
                                    :show-close="true"
                                    size="478px"
                                >
                                    <div id="showmsg">
                                        <div class="personalmsg">
                                            <div class="top">
                                                <div class="pic">
                                                    <img
                                                        src="../../assets/touxiang1.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="msg">
                                                    <div class="txt">
                                                        <span
                                                            style="
                                                                font-size: 18px;
                                                                margin-right: 20px;
                                                            "
                                                            >{{ name }}</span
                                                        >
                                                        <el-button
                                                            type="success"
                                                            round
                                                            size="mini"
                                                            >{{
                                                                state == 3
                                                                    ? "在班"
                                                                    : "请假"
                                                            }}</el-button
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >工号：{{
                                                                id
                                                            }}</span
                                                        >
                                                    </div>
                                                    <div class="txt">
                                                        <span
                                                            >擅长：欧迪足道、欧迪油压、欧迪指压</span
                                                        >
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="state">
                                                <el-button
                                                    type="primary"
                                                    size="medium"
                                                    ><span style="color: white"
                                                        >预约</span
                                                    ></el-button
                                                >
                                                <el-button size="medium"
                                                    >请假</el-button
                                                >
                                            </div>
                                        </div>
                                        <div class="rows" style=""></div>
                                        <div class="judgement">
                                            <div class="section">
                                                <p
                                                    style="
                                                        color: skyblue;
                                                        padding-left: 15px;
                                                    "
                                                >
                                                    • 评价信息
                                                </p>
                                            </div>
                                            <div
                                                class="section"
                                                style="padding-left: 25px"
                                            >
                                                <span>服务订单：523单</span>
                                                <span
                                                    style="
                                                        dispaly: inline-block;
                                                        margin-left: 170px;
                                                        color: rgb(231, 79, 79);
                                                    "
                                                    >综合好评 99.26%</span
                                                >
                                            </div>
                                            <div class="section goodjudge">
                                                <div class="pretty">
                                                    单向好评：
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="choose">
                                                    <div class="project">
                                                        <div class="ele">
                                                            <p>99.26%</p>
                                                            <span class="dot"
                                                                >•</span
                                                            ><span>油压</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rows_1" style=""></div>
                                        <div class="comment">
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value2"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value3"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="comment-item">
                                                <div class="show-pic">
                                                    <img
                                                        src="../../assets/touxiang2.png"
                                                        alt=""
                                                    />
                                                </div>
                                                <div class="show-txt">
                                                    <div class="left">
                                                        <div class="left-txt">
                                                            圆圆的我
                                                        </div>
                                                        <div class="left-txt">
                                                            欧迪足道
                                                        </div>
                                                    </div>
                                                    <div class="right">
                                                        <div class="block">
                                                            <el-rate
                                                                class="stars"
                                                                v-model="value4"
                                                                :colors="colors"
                                                            >
                                                            </el-rate>
                                                        </div>
                                                        <div class="time">
                                                            2019-02-03 15:23:56
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pageBtn">
                                            <el-button
                                                type="primary"
                                                icon="el-icon-arrow-left"
                                                >上一页</el-button
                                            >
                                            <span class="pagetxt">1/5</span>
                                            <el-button type="primary"
                                                >下一页<i
                                                    class="el-icon-arrow-right el-icon--right"
                                                ></i
                                            ></el-button>
                                        </div>
                                    </div>
                                </el-drawer>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("technician");
export default {
    data() {
        return {
            rate: Math.random() * 2 - 1,
            manSrc: ["../../assets/nan1.jpg", "../../assets/nan2.jpg"],
            personalMsg: [],
            name: "",
            id: "",
            state: "",
            drawer: false,
            skills: ["按摩", "修脚", "足道"],
            freeData: [
                {
                    _id: 1,
                    tecname: "1子",
                    image: "../../assets/tec.jpg",
                },
                {
                    _id: 2,
                    tecname: "2子",
                    image: "../../assets/tec1.jpg",
                },
                {
                    _id: 3,
                    tecname: "3子",
                    image: "../../assets/tec2.jpg",
                },
                {
                    _id: 4,
                    tecname: "1子",
                    image: "../../assets/tec.jpg",
                },
            ],
            onworkingData: [
                {
                    _id: 1,
                    tecname: "1子",
                    image: "../../assets/p.jpg",
                    state: "点",
                },
                {
                    _id: 2,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 3,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 4,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 5,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 6,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 7,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 8,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
                {
                    _id: 9,
                    tecname: "1郎",
                    image: "../../assets/p.jpg",
                    state: "轮",
                },
            ],

            value2: 4,
            value3: 2,
            value4: 5,
            colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        };
    },
    mounted() {
        this.findAll();
    },
    computed: {
        ...mapState(["workingData", "femaleData", "manData"]),
    },
    methods: {
        ...mapActions(["findAll"]),
        getPersonalMsg(item) {
            console.log(item);
            // this.personalMsg = this.workingData.filter(
            //     (item) => item.technician_id == _id
            // );
            this.name = item.technician_name;
            this.id = item.technician_id;
            this.state = item.technician_state;
            // console.log(this.personalMsg[0]);
            // console.log(this.personalMsg[0].technician_name);
            // console.log(this.personalMsg[0].technician_id);
            // console.log(this.personalMsg[0].technician_state);
        },
        changeState(item) {
            console.log(123);
            console.log(item);
            if (item.technician_state == 1) {
                item.technician_state == 2;
            }
        },
    },
};
</script>

<style scoped lang="scss">
* {
    text-align: start;
    box-sizing: border-box;
}
#working {
    width: 100%;
    height: 160px;
    // border: 1px solid;
    padding: 15px;
    .container {
        margin-top: 5px;
        display: flex;
        // flex-wrap: wrap;
        //   justify-content: space-between;
        flex-direction: row;
        .server {
            // border: 1px solid;
            color: #fff;
            padding: 5px;

            .server-item {
                width: 112px;
                height: 82px;
                background-color: rgb(249, 160, 118);
                border-radius: 5px;
                .top {
                    height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    text-align: center;
                }
                .middle {
                    height: 36px;
                    border-top: 1px solid;
                    border-bottom: 1px solid;
                    .pic {
                        float: left;
                        width: 32px;
                        height: 32px;
                        // border: 1px solid;
                        margin-right: 2px;
                        // margin-top: 3px;
                        line-height: 32px;
                        text-align: center;
                    }
                    .img {
                        // margin-left: 2px;
                        // background-image: url("../../assets/tec2.jpg");
                        background-size: cover;
                        border-radius: 50%;
                        .img-show {
                            border-radius: 50%;
                            width: 32px;
                            height: 32px;
                        }
                    }
                    .tecname {
                        font-size: 13px;
                        font-weight: 400;
                        width: 42px;
                        padding: 0;
                    }
                    .state {
                        // border-radius: 50%;
                        .inside {
                            width: 26px;
                            height: 26px;
                            border-radius: 50%;
                            margin: 3px 3px auto;
                            text-align: center;
                            background-color: #fff;
                            line-height: 26px;
                            font-size: 14px;
                            font-weight: 500;
                            color: rgb(41, 174, 197);
                        }
                    }
                }
                .foot {
                    // display: flex;
                    height: 22px;
                    border-bottom-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background-color: rgb(224, 148, 120);
                    .left-room {
                        margin-left: 5px;
                        float: left;
                        font-size: 14px;
                        line-height: 22px;
                    }
                    .right-servenum {
                        margin-right: 5px;
                        float: right;
                        font-size: 14px;
                        height: 22px;
                        line-height: 22px;
                    }
                }
            }
        }
    }
}
/deep/ .el-tabs--top .el-tabs__item.is-top {
    font-size: 20px;
}
#free {
    height: 380px;
    width: 100%;
    // background-color: rgb(41, 174, 197);
    padding: 10px;
    border-top: 2px solid rgb(223, 233, 236);
    margin-top: 10px;
    .content {
        margin-top: 5px;
        // border: 1px solid;
        width: 1000px;
        height: 338px;
        margin: 0 auto;
        .left {
            width: 70px;
            height: 112px;
            line-height: 112px;
            display: flex;
            // flex-direction: row;
            // background-color: antiquewhite;
            // float: left;
            .text {
                height: 112px;
                width: 70px;
                border-radius: 5px;
                overflow: hidden;
                // border: 1px solid;
                border: none;
                line-height: 112px;
                text-align: center;
                font-size: 18px;
            }
        }
        .right {
            height: 338px;
            width: 900px;
            // background-color: aqua;
            display: flex;
            flex-direction: row;
            float: right;
            margin-top: -337px;
            margin-right: 20px;
            .femal {
                width: 435px;
                height: 338px;
                // border: 1px solid;
                .njs {
                    overflow: hidden;
                    height: 112px;
                    display: flex;
                    flex-direction: row;
                    .items {
                        margin-top: 26px;
                        margin-right: 20px;
                        width: 64px;
                        height: 64px;
                        border-radius: 3px;
                        position: relative;
                        .tecnames {
                            border-bottom-right-radius: 3px;
                            border-bottom-left-radius: 3px;
                            display: inline-block;
                            height: 20px;
                            line-height: 20px;
                            width: 64px;
                            text-align: center;
                            background-color: rgb(240, 123, 168);
                            color: #fff;
                            // margin-top: -30px;
                            top: 45px;
                            left: 16px;
                            z-index: 30;
                            position: absolute;
                        }
                        img {
                            width: 64px;
                            height: 64px;
                            display: block;
                            border-radius: 3px;
                            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                        }
                    }
                }
            }
            .man {
                width: 435px;
                height: 338px;
                // border: 1px solid;
                .njs {
                    overflow: hidden;
                    height: 112px;
                    display: flex;
                    flex-direction: row;
                    .items {
                        margin-top: 26px;
                        margin-right: 20px;
                        width: 64px;
                        height: 64px;
                        border-radius: 3px;
                        position: relative;
                        .tecnames {
                            border-bottom-right-radius: 3px;
                            border-bottom-left-radius: 3px;
                            display: inline-block;
                            height: 20px;
                            line-height: 20px;
                            width: 64px;
                            text-align: center;
                            background-color: rgb(240, 123, 168);
                            color: #fff;
                            // margin-top: -30px;
                            top: 45px;
                            left: 16px;
                            z-index: 30;
                            position: absolute;
                        }
                        img {
                            width: 64px;
                            height: 64px;
                            display: block;
                            border-radius: 3px;
                        }
                    }
                }
            }
        }
    }
}

// .el-drawer__body {
//     width: 400px;
// }
/deep/ .el-drawer__header {
    color: skyblue;
}

#showmsg {
    // width: 800px;
    height: 90%;
    // border: 1px dashed;
    // background-color: skyblue;

    .personalmsg {
        width: 100%;
        height: 176px;
        // background-color: aquamarine;
        .top {
            height: 120px;
            overflow: hidden;
            padding-top: 20px;
            .pic {
                float: left;
                width: 100px;
                height: 120px;
                margin-left: 64px;

                // border-radius: 50%;
                img {
                    width: 100px;
                    // height: 100px;
                    margin: 0 auto;
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            .msg {
                float: left;
                .txt {
                    height: 30px;
                }
            }
        }
        .state {
            // text-align: center;
            display: flex;
            justify-content: space-around;
            button {
                border: 1px solid skyblue;
                color: skyblue;
            }
        }
    }
    .rows {
        border-top: 1px solid rgb(223, 233, 236);
        width: 440px;
        margin: 0 auto;
    }
    .rows_1 {
        border-top: 1px solid rgb(223, 233, 236);
        width: 440px;
        margin: 0 auto;
        margin-top: 20px;
    }
    .judgement {
        padding: 15px;
        height: 150px;
        .section {
            // height: 42px;
            text-align: center;
        }
        .goodjudge {
            overflow: hidden;
            padding-left: 25px;
            .pretty {
                float: left;
                text-align: center;
                height: 100%;
                vertical-align: middle;
                margin-top: 34px;
            }
            .choose {
                float: left;
                margin-right: 25px;
                .project {
                    overflow: hidden;
                    .ele {
                        float: left;
                        p {
                            color: rgb(231, 79, 79);
                        }
                        .dot {
                            color: rgb(247, 175, 108);
                        }
                    }
                }
            }
        }
    }
    .comment {
        width: 440px;
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        .comment-item {
            width: 440px;
            height: 67px;
            overflow: hidden;
            .show-pic {
                float: left;
                width: 44px;
                margin-top: 12px;
                img {
                    width: 44px;
                }
            }
            .show-txt {
                float: left;
                height: 67px;
                width: 380px;
                display: flex;
                justify-content: space-between;
                .left-txt {
                    height: 33px;
                    line-height: 33px;
                }
                .right {
                    overflow: hidden;
                    .block {
                        height: 33px;
                        line-height: 33px;
                        overflow: hidden;
                        padding-top: 6px;
                        margin-right: -8px;
                        .stars {
                            float: right;
                        }
                    }
                    .time {
                        height: 33px;
                        line-height: 33px;
                    }
                }
            }
        }
    }
    .pageBtn {
        text-align: center;
        margin-top: 10px;
        .pagetxt {
            display: inline-block;
            margin-left: 25px;
            margin-right: 25px;
            font-size: 20px;
            height: 43px;
            line-height: 43px;
            color: rgb(42, 138, 255);
        }
    }
}
// /deep/.el-button--medium {
//     color: #fff;
// }
</style>